{% extends "app/base_site.html" %}

{% block title %} 预览轮巡 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}
<style>

    #grid_video_container {
        width: 100%;
        height: 100%;
        /*border: 1px solid red;*/
    }
    .grid_item_active {
        /*box-shadow: 0 0 2px 1px red;*/
        border: 1px red solid !important;
    }

    .grid_item1 {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 1.0);
        border: 1px #fff solid;
    }
    .grid_item4 {
        float: left;
        width: 50%;
        height: 50% !important;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 1.0);
        border: 1px #fff solid;
    }
    .grid_item9 {
        float: left;
        width: 33.33%;
        height: 33.33% !important;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 1.0);
        border: 1px #fff solid;
    }
    .grid_item16 {
        float: left;
        width: 25%;
        height: 25% !important;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 1.0);
        border: 1px #fff solid;
    }
</style>

  <div class="right_col" role="main">
    <div class="">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>预览轮巡
                 <span id="top_loading" ><img class="top_loading_img" src="/static/images/load.gif" alt="loading">加载中</span>
                <button style="margin-left:10px;" type="button"  class="btn btn-default btn-sm" onclick="f_createGridVideoContainer(1)">单屏</button>
                <button type="button"  class="btn btn-default btn-sm" onclick="f_createGridVideoContainer(4)">4分屏</button>
                <button type="button"  class="btn btn-default btn-sm" onclick="f_createGridVideoContainer(9)">9分屏</button>
                <button type="button"  class="btn btn-default btn-sm" onclick="f_createGridVideoContainer(16)">16分屏</button>
                <span id="patrol_msg" style="color:#169F85;font-size: 13px;font-weight: 600;"></span>
                    <button type="button"  class="btn btn-dark btn-sm" onclick="f_clickFullScreen()">全屏显示</button>
                 <span id="top_msg">{{top_msg}}</span>

           </h2>

            </div>

            <div class="x_content">

              <div class="col-md-12 col-sm-12 col-xs-12">
                <div id="grid_video_container">

                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}

<script src="/static/lib/livePlayer/liveplayer-element.min.js"></script>

<script>
    let ele_top_loading = $("#top_loading");
    let ele_top_msg= $("#top_msg");
    let ele_patrol_msg= $("#patrol_msg");

    let mPatrolCode = "{{ obj.code }}";
    let eleGridVideoContainer = $("#grid_video_container");
    let mSelectedGridVideoCount =-1;//默认为-1，当前选中的分屏数量
    let mSelectedGridItemClass;//当前选中的多屏class属性
    let mSelectedVideoPlayerMap = new Map;//播放器字典 {id:player,,,}

    let mPatrol;
    let preview_refresh_duration = 10000;//默认10s
    let mCurPatrolControlData = [];
    let mCurPatrolCount = -1;//默认为-1，表示还未启动任何一次轮巡
    let mSameGroupCheckTimes = -1;//默认为-1，表示同一批次的布控轮巡检测次数


    function f_playStart(video_id,video_url){
        console.log("f_playStart() ",video_id,video_url);
        try {
            let player = mSelectedVideoPlayerMap.get(video_id);
            if(typeof player === "undefined" || player === "undefined"){
                //首次创建播放器
                player = document.getElementById(video_id);
                player.setAttribute("video-url", video_url);
                mSelectedVideoPlayerMap.set(video_id,player);
            }else{
                //已经存在播放器，重新设置播放地址
                player.setAttribute("video-url", video_url);
                mSelectedVideoPlayerMap.set(video_id,player);
            }
        }catch (e) {
            console.log("f_playStart() error:",e);
        }

    }
    function f_playStop(video_id){
        console.log("f_playStop() ",video_id);
        try {
            let player = mSelectedVideoPlayerMap.get(video_id);
            if(typeof player === "undefined" || player === "undefined"){
                //播放器已经停止播放
            }else{
                //播放器停止播放成功
                mSelectedVideoPlayerMap.delete(video_id);
                player.setAttribute("video-url", "");
            }
        }catch (e) {
            console.log("f_playStop() error:",e);
        }


    }
    function f_createVideoId(index) {
        return "video" + mSelectedGridVideoCount.toString() + "_" + index.toString();
    }
    function f_createGridVideoContainer(gridVideoCount,isReload=true) {
        mSelectedGridVideoCount = gridVideoCount;
        switch (gridVideoCount) {
            case 1:
                mSelectedGridItemClass = "grid_item1";
                break;
            case 4:
                mSelectedGridItemClass = "grid_item4";
                break;
            case 9:
                mSelectedGridItemClass = "grid_item9";
                break;
            case 16:
                mSelectedGridItemClass = "grid_item16";
                break;
            default:
                mSelectedGridItemClass = "grid_item4";
                break;
        }

        for (let video_id of mSelectedVideoPlayerMap.keys()){
            f_playStop(video_id);
        }
        mSelectedVideoPlayerMap.clear();
        mCurPatrolCount = -1;//布控周期重置为-1

        let html = "";
        //eleGridVideoContainer.html(html);
        for (let i = 0; i < mSelectedGridVideoCount; i++) {
            let video_id = f_createVideoId(i);
            html += "<div class='"+mSelectedGridItemClass+"'>";
            html += "<live-player id='"+video_id+"'  live=\"true\" fluent='true' hide-snapshot-button=\"true\" hide-fullscreen-button='true' stretch=\"true\">";
            html += "</live-player>";
            html += "</div>";

        }
        eleGridVideoContainer.html(html);

        if(isReload){
            f_openInfo();
        }
    }

    function f_clickFullScreen() {
        let ele_grid_video_container = document.getElementById("grid_video_container");
        //使用Chrome浏览器需要加上webkit
        // ele_grid_video_container.webkitRequestFullScreen();
        // ele_grid_video_container.requestFullscreen();
        //使用FireFox浏览器需要加上moz
        // ele_grid_video_container.mozRequestFullScreen();
        if (ele_grid_video_container.requestFullscreen) {
            ele_grid_video_container.requestFullscreen();
        } else if (ele_grid_video_container.webkitRequestFullScreen) {
            ele_grid_video_container.webkitRequestFullScreen();
        } else if (ele_grid_video_container.mozRequestFullScreen) {
            ele_grid_video_container.mozRequestFullScreen();
        } else if (ele_grid_video_container.msRequestFullScreen) {
            ele_grid_video_container.msRequestFullScreen();
        }
    }
    function f_showPatrolMsg(sameGroupCurPage) {
        let control_concurrency = mPatrol["control_concurrency"];
        let control_duration = mPatrol["control_duration"];
        let msg = "轮巡周期:"+mCurPatrolCount.toString()+"，轮巡时长:"+control_duration.toString()+"s，轮巡并发:"+control_concurrency.toString()+"，轮巡并发第"+sameGroupCurPage.toString()+"页";
        ele_patrol_msg.html(msg);
    }
    function f_openInfo(isRecursive=false) {
        //ele_top_loading.show();
        $.ajax({
               url: '/controlPatrol/openInfo',
               type: "get",
               async: true,
               data: {"code":mPatrolCode},
               dataType: "json",
               timeout: 0,
               error: function () {
                   //ele_top_loading.hide();
                   myToast2025("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   //ele_top_loading.hide();
                   if(1000 === res.code){
                       let patrol = res.patrol;
                       let worker = res.worker;

                       mPatrol = patrol;
                       preview_refresh_duration = mPatrol["preview_refresh_duration"] * 1000;

                       //worker.createDateStr;
                       let curPatrolControlData = worker.curPatrolControlData;
                       let curPatrolCount = worker.curPatrolCount;
                       //worker.curPatrolLastStartTimestamp;
                       //worker.curPatrolStartTimestamp;

                       if(-1 === mCurPatrolCount){ //页面内，首次加载布控轮巡数据
                           mCurPatrolCount = curPatrolCount;
                           mCurPatrolControlData= curPatrolControlData;
                            //播放
                            let maxLength = mCurPatrolControlData.length;
                            if(mSelectedGridVideoCount < maxLength){
                                maxLength = mSelectedGridVideoCount;
                            }
                           for (let i = 0; i < maxLength; i++) {
                               let video_id = f_createVideoId(i);
                               let videoUrl = mCurPatrolControlData[i]["videoUrl"];
                               f_playStart(video_id,videoUrl);
                           }
                           mSameGroupCheckTimes = 0;
                           f_showPatrolMsg(1);
                       }else{
                           if(curPatrolCount > mCurPatrolCount){//轮巡周期发生了变化，因此从第一个布控开始依次显示
                               //先清理之前显示的视频
                               for (let video_id of mSelectedVideoPlayerMap.keys()){
                                    f_playStop(video_id);
                                }
                               mSelectedVideoPlayerMap.clear();
                               mCurPatrolCount = curPatrolCount;
                               mCurPatrolControlData= curPatrolControlData;
                               //播放
                                let maxLength = mCurPatrolControlData.length;
                                if(mSelectedGridVideoCount < maxLength){
                                    maxLength = mSelectedGridVideoCount;
                                }
                               for (let i = 0; i < maxLength; i++) {
                                   let video_id = f_createVideoId(i);
                                   let videoUrl = mCurPatrolControlData[i]["videoUrl"];
                                   f_playStart(video_id,videoUrl);
                               }
                               mSameGroupCheckTimes = 0;
                               f_showPatrolMsg(1);
                           }else{
                               //本次获得的轮巡数据，轮巡周期未发生变化，因此不需要从第一个布控开始依次显示
                                mSameGroupCheckTimes += 1;
                                let patrolControlLength = mCurPatrolControlData.length;
                                let sameGroupTotalPage = Math.ceil(patrolControlLength / mSelectedGridVideoCount);//计算当前轮巡并发数据，需要几页才能完全显示
                                let sameGroupCurIndex = mSameGroupCheckTimes % sameGroupTotalPage;

                                f_showPatrolMsg(sameGroupCurIndex+1);

                               //console.log("组内翻页 >>>>>> ");
                               //console.log("-------- mSameGroupCheckTimes="+mSameGroupCheckTimes.toString());
                               //console.log("-------- patrolControlLength="+patrolControlLength.toString());
                               //console.log("-------- mSelectedGridVideoCount="+mSelectedGridVideoCount.toString());
                               //console.log("-------- sameGroupTotalPage="+sameGroupTotalPage.toString());
                               //console.log("-------- sameGroupCurIndex="+sameGroupCurIndex.toString());

                               let start = sameGroupCurIndex * mSelectedGridVideoCount;
                               let end = start + mSelectedGridVideoCount;

                               //清理正在显示的播放窗口
                               for (let video_id of mSelectedVideoPlayerMap.keys()){
                                    f_playStop(video_id);
                                }
                               mSelectedVideoPlayerMap.clear();
                               let i = 0;
                               for (let index = start; index < end; index++) {
                                   if(index < patrolControlLength){
                                       let video_id = f_createVideoId(i);
                                       let videoUrl = mCurPatrolControlData[i]["videoUrl"];
                                       f_playStart(video_id,videoUrl);
                                        i += 1;
                                   }else{
                                       break;
                                   }
                               }
                           }

                       }
                   }

                   if(isRecursive){
                     setTimeout(function () {
                        f_openInfo(isRecursive);
                     }, preview_refresh_duration);
                   }
               }
            });

    }

    $(function() {
        f_createGridVideoContainer(9,false);
        f_openInfo(true);
    });


</script>

{% endblock javascripts %}
